<template>
	<view class="login-wrap">
		<!-- <view class="loginpage-head">
			Register
			<image class="iconclose" src="../../static/img/auth/close.png" @click="handleClose"></image>
		</view> -->
		<comp-navbar title="Register" :placeholder="true"></comp-navbar>
		<view class="swich-btn">
			<view class="swich-btn-item" :class="[tabIndex == 0 ? 'act':'']" @click="handleTab(0)">
				<image class="iconemail" src="../../static/img/auth/email.png"></image>
				<view class="btn-text">E-mail</view>
			</view>
			<view class="swich-btn-item" :class="[tabIndex == 1 ? 'act':'']" @click="handleTab(1)">
				<image class="iconphone" src="../../static/img/auth/phone.png"></image>
				<view class="btn-text">Celurar</view>
			</view>
		</view>
		<up-input class="inputBox" :border="'none'" placeholder="Insira o número de celurar">
			<template #prefix>
				<view class="leftImgBox">
					<image class="input-preicon1" src="../../static/img/auth/phone.png"></image>
					<view class="pre1">+55</view>
				</view>
			</template>
		</up-input>
		<up-input class="inputBox" :border="'none'" placeholder="Por favor, insira o email" v-if="tabIndex == 1">
			<template #prefix>
				<view class="leftImgBox">
					<image class="input-preicon2" src="../../static/img/auth/email.png"></image>
				</view>
			</template>
		</up-input>
		<up-input type="password" class="inputBox" :border="'none'" placeholder="Senha" v-if="tabIndex == 0">
			<template #prefix>
				<view class="leftImgBox">
					<image class="input-preicon3" src="../../static/img/auth/pwd.png"></image>
				</view>
			</template>
		</up-input>
		<view class="btn_box">
			Esqueceu sua senha?
		</view>
		<view class="regto">Register</view>
		<view class="LoginTo">
			<view>
				Ainda não tem conta? Criar <text>uma</text>
			</view>
			<image src="../../static/img/auth/kf.png" mode=""></image>
		</view>
		<up-divider text="Ou" lineColor="#a8abb2"></up-divider>
		<view class="GugeTo">
			Entrar com Google+
		</view>
		<view class="bannerpart"></view>
		<view class="logBox">
			<view class="logText">
				<view class="welcome">Bem-vindo à</view>
				<!-- <view class="webwww">xxx</view> -->
				<view class="web-tips">O valor de depósito pode ser sacado imediamente, caiu na conta rapidamente</view>
			</view>
			<view class="logImg">
				<view class="logImg-div">
					<!-- <image src="/assets/icon_zjm_foot06-Bfvy8vwU.png" alt="" > -->
				</view>
				<view class="logImg-div">
					<!-- <image src="/assets/icon_zjm_LOGO-xzGGw6jo.png" alt="" > -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	const tabIndex = ref(0)

	const handleTab = (index) => {
		tabIndex.value = index
	}


	const handleClose = () => {
		uni.navigateBack()
	}
	onLoad((opt) => {
		console.log('login-onLoad..', opt)
	})
</script>

<style lang="scss" scoped>
	.login-wrap {
		font-size: 30rpx;
		padding: 0 40rpx 40rpx;
		color: #fff;

		.swich-btn {
			margin: 4rpx auto 62rpx;
			display: flex;
			align-items: center;
			width: 360rpx;
			height: 75rpx;
			background-color: #1c155c;
			border-radius: 75rpx;

			.swich-btn-item {
				width: 176rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666f87;
				border-radius: 64rpx;

				&:last-child {
					width: 184rpx;
				}

				.iconemail {
					width: 34rpx;
					height: 34rpx;
					margin-right: 8rpx;
				}

				.iconphone {
					width: 28rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				.btn-text {
					margin-left: 4rpx;
					color: #666f87;
				}

				&.act {
					background-color: #5b35de;

					.iconfont,
					.btn-text {
						color: #fff;
					}
				}
			}
		}

		.inputBox {
			height: 88rpx;
			background: #1c155b;
			border-radius: 20rpx;
			margin-top: 40rpx;
			;
		}

		.leftImgBox {
			display: flex;
			align-items: center;
			margin-left: 34rpx;
			margin-right: 16rpx;

			.input-preicon1 {
				width: 28rpx;
				height: 36rpx;
			}

			.input-preicon2 {
				width: 32rpx;
				height: 24rpx;
			}

			.input-preicon3 {
				width: 30rpx;
				height: 34rpx;
			}

			.pre1 {
				padding-left: 34rpx;
				padding-right: 14rpx;
				color: #666f87;
				border-right: 1px solid #666f87;
				height: 40rpx;
				line-height: 40rpx;
			}
		}

		.logBox {
			.logImg {
				height: 50rpx;
				display: flex;
				justify-content: center;

				view {
					flex: 1;

					&:nth-child(1) {
						border-right: 1rpx solid #9faec7;
					}
				}
			}

			.logText {
				text-align: center;

				.welcome {
					margin-top: 40rpx;
					font-size: 26rpx;
					color: #fff;
					font-weight: 600;
				}

				.webwww {
					height: 38rpx;
					font-size: 30rpx;
					line-height: 30rpx;
					height: 30rpx;
					font-weight: 700;
					color: #286aff;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}

				.web-tips {
					font-size: 22rpx;
					line-height: 24rpx;
					color: #4b5c78;
					margin-bottom: 70rpx;
				}
			}
		}

		.bannerpart {
			width: 100%;
			margin-top: 54rpx;
			height: 160rpx;
			border-radius: 20rpx;
			background: green;
		}

		.GugeTo {
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 75rpx;
			width: 100%;
			background-color: #232c3d;
			text-align: center;
			font-size: 28rpx;
			border-radius: 12rpx;
		}

		.LoginTo {
			width: 100%;
			margin: 0 auto 60rpx;
			font-size: 22rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			padding-left: 40rpx;
			padding-right: 40rpx;
			position: relative;
			color: #666f87;

			view {
				text-align: center;
			}

			text {
				color: #cacaca;
			}

			image {
				position: absolute;
				right: 28rpx;
				top: 0;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.btn_box {
			text-align: right;
			font-size: 22rpx;
			color: #cacaca;
			margin: 40rpx auto;
		}

		.loginpage-head {
			height: 110rpx;
			padding-bottom: 62rpx;
			position: sticky;
			background: #0d063e;
			z-index: 3;
			top: 0rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: 600;

			.iconclose {
				position: absolute;
				width: 52rpx;
				height: 52rpx;
				right: 40rpx;

				&::after {
					content: "";
					position: absolute;
					left: -20rpx;
					top: -20rpx;
					bottom: -20rpx;
					right: -20rpx;

				}
			}
		}

		.regto {
			width: 100%;
			margin-top: 30rpx;
			height: 70rpx;
			border: 1rpx solid #4226ae;
			border-radius: 20rpx;
			display: flex;
			font-size: 28rpx;
			justify-content: center;
			align-items: center;
		}
	}
</style>